<template>
    <div id="login">
        <div class="login-image">
            <img src="./login.png" alt="">
        </div>
        <div class="title">
            B游汇推广后台管理平台
        </div>
        <div class="login-form">
            <el-row>
                <el-col :span="24">
                    <el-input id="name"  v-model="name" placeholder="请输入帐号">
                        <template slot="prepend">帐号</template>
                    </el-input> 
                </el-col>
            </el-row>
            <el-row>
                 <el-col :span="24">
                    <el-input id="password"  v-model="password" placeholder="请输入密码">
                        <template slot="prepend">密码</template>
                    </el-input> 
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" style="margin-top:10px;">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                </el-col>
                <el-col :span="6" style="float:right;">
                    <el-button id="login" style="width:100%" type="primary" @click="loginForm()">登录</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return{
                checked:true,
                name:'',
                password:''
            }
        },
        methods:{
            loginForm(){
                if(this.name==''){
                    this.$message.error('请输入账户！');
                }else if(this.password==""){
                    this.$message.error('请输入密码！');
                }else{
                     this.$message({
                        message: '登录成功，跳转中',
                        type: 'success'
                    });
                    let _this=this;
                     setTimeout(()=>{
                       _this.$router.push({path:'/index'});
                    },3000);
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .login-form{
        width:370px;
        margin:0 auto;
    }
    .title{
        color:#2a8dd9;
        font-size:26px;
        margin-bottom:30px;
    }
    .el-row{
        margin-bottom:20px;
    }
</style>